import React, { Component } from "react";
import { Form, Icon, Input, Button, Alert, Layout, Avatar, Modal, message, Select, Upload, Card, Row, Col  } from "antd";
import { getAccessTokenForOpenId, getUserInfoStudentByWeChatIdForSendMsg, getUserWechatInfoStudent, deleteWechatIdStudentForSendMsg, bindStudentApi, ConnectionApi } from "../js/wechatapi.js";
import { iconFontUrl} from "../js/config.js";

import WxImageViewer from "react-wx-images-viewer";

class picturePreview extends React.Component {

    state = {
        imags: [
            require('./app/img/example.jpg')
        ],
        // require('./public/wade.jpg'),
        // require('./assets/0.jpg'),
        // require('./assets/3.jpg'),
        // require('./assets/4.jpg'),
        
        index: 0,
        isOpen: false
    };
  
    onClose = () =>{
        this.setState({
            isOpen: false
        })
    }
  
    openViewer (index){
        this.setState({
            index,
            isOpen: true
        })
    }
  
    render() {
        const {
            imags,
            index,
            isOpen
        } = this.state;
  
        return (
            <div className="app">
                <div className="img-list">
                    {/*直接打开*/}
                    <button onClick={this.openViewer.bind(this, 0)}>点击打开图片</button>
                    {
                        this.state.imags.map((item, index) => {
                            return <div className="img" key={item}>
                                <img src={item} alt="" onClick={this.openViewer.bind(this, index)} width="100%" height="auto" className=""/> 
                            </div>
                        })
                    }
                </div>
                {
                    isOpen ? <WxImageViewer onClose={this.onClose} urls={this.state.imags} index={index}/> : ""
                }
            </div>
        )
    }
}




export {picturePreview};



